<template>
	<view class="notice">
		<view class="left">
			<uni-icons class="icon" type="sound-filled" color="#28B389" size="20"></uni-icons>
			<text class="text">公告</text>
		</view>
		<view class="center">
			<swiper class="swiper" circular vertical autoplay interval="1500" duration="500">
				<template v-for="item in noticeList" :key="item._id">
					<swiper-item class="swiper-item">
						<navigator class="text" :url="'/pages/notice/notice?id='+item._id">
							{{item.title}}
						</navigator>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<view class="right">
			<uni-icons type="right" size="16" color="#333"></uni-icons>
		</view>
	</view>
</template>

<script setup>
import { apiNoticeList } from '@/service/apis';
const noticeList = ref([]);	// 公告列表
const getNotice = async()=>{
	const res = await apiNoticeList({select:true})
	noticeList.value = res
}
onMounted(() => {
	getNotice()
})	
</script>

<style lang="scss" scoped>
.notice {
	display: flex;
	align-items: center;
	width: 690rpx;
	height: 80rpx;
	background: #f9f9f9;
	border-radius: 80rpx;
	margin: 30rpx auto;
	.left {
		width: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $primary-theme-color;
		font-weight: 600;
		font-size: 28rpx;
		:deep(.uni-icons){
			color: $primary-theme-color !important;
		}	
	}
	.center {
		flex: 1;
		height: 100%;
		.swiper {
			width: 100%;
			height: 100%;
			.swiper-item {
				height: 100%;
				font-size: 30rpx;
				color:#666;
				display: flex;
				align-items: center;
				.text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.right{
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
